<!--  -->
<template>
	<view class="mtb">
		<view class="tabType1 flex" v-if="tabType == 1">
			<text v-for="(item, index) in tabList" :key="index"
				:style="tabIdx==item.idx?`color:${activeColor}`:`color:${color}`"
				:class="{ active:item.idx?tabIdx==item.idx: index == tabIdx }" @click="changeIndex(index,item)">
				{{ item.title }}
			</text>
		</view>
		<view class="tabType2 flex" v-if="tabType == 2">
			<text v-for="(item, index) in tabList" :key="index"
				:class="{ active:item.idx?tabIdx==item.idx: index == tabIdx }" @click="changeIndex(index,item)">
				{{ item.title }}
			</text>
		</view>
	</view>
</template>
<script>
	import { string } from '../../libs/fn/verify';
	export default {
		name: "mtb",
		components: {},
		data() {
			return {};
		},
		props: {
			activeColor: {
				type: String,
				default: 'var(--theme)'
			},
			color: {
				type: String,
				default: '#d9d9d9'
			},
			tabIdx: {
				type: Number,
				default: 1,
			},
			tabList: {
				type: Array,
				default: () => {
					return [{
							idx: 1,
							title: "tab01",

						},
						{
							idx: 2,
							title: "tab02",
						},
					]
				},
			},
			tabType: {
				default: 1,
				type: Number
			}
		},
		computed: {

		},
		mounted() {
			// uni.createSelectorQuery().select('.active::after').fields({ size: true,scrollOffset: true, context: true, dataset: true, id:true }).exec(res=>{
			// 	console.log('res===>',res)
			// });
			// uni.createSelectorQuery().select('.active::after').boundingClientRect(data=>{
			//     console.log(data); // 打印获取结果
			// }).exec()

		},
		watch: {},
		methods: {
			changeIndex(index, item) {
				if (item.jump) {
					return this.Jump(item.jump)
				}
				this.$emit("change", item.idx ? item.idx : index);
			}
		},
		created() {},
	};
</script>
<style lang='scss' >
	.tabType1 {
		&>text {
			padding: 0rpx 30rpx 20rpx;
			/* 	color: #d9d9d9; */
			font-size: 27rpx;
			font-weight: bold;
			position: relative;
			text-align: center;
		}


		.active::after {
			position: absolute;
			content: "";
			width: 50%;
			height: 4rpx;
			bottom: 0rpx;
			left: 50%;
			transform: translate(-50%);
			background-color: var(--theme);
		}
	}

	.mtb {
		/* padding: 30rpx 0rpx; */

	}

	.tabType2 {
		&>text {
			font-size: 27rpx;
			font-weight: bold;
			position: relative;
			background: #f3f7ff;
			border-radius: 50rpx;
			padding: 16rpx 30rpx;
			color: #999999;
		}

		.active {
			background: var(--theme) !important;
			color: #fff !important;
		}

		&>text+text {
			margin-left: 16rpx;
		}
	}
</style>